<template>
    <a-drawer :width="800" title="套管" placement="right" v-model:visible="open">
        <a-steps :current="2">
            <a-step title="选择套管" />
            <a-step title="设置参数" description="" />
            <a-step title="完成" description="" />
        </a-steps>
        <template #extra>

        </template>
        <br>
        <el-button @click="openModal()" style="width: 100%;">添加套管</el-button>
        <!-- 套管列表 -->
        <a-table :columns="columns" :data-source="dataSource" :scroll="{ x: 1000 }">
            <template #bodyCell="{ column, text, record }">
                <template v-if="['bottom', 'top'].includes(column.dataIndex)">
                    <div>
                        <a-input-number v-if="editableData[record.id]"
                            v-model:value="editableData[record.id][column.dataIndex]" style="margin: -5px 0" />
                        <template v-else>
                            {{ text }}
                        </template>
                    </div>
                </template>
                <template v-else-if="column.dataIndex === 'operation'">
                    <div class="editable-row-operations">
                        <span>
                            <AntdZh><a-popconfirm title="确定删除该条记录 ?" @confirm="dele(record.id)">
                                <a-button type="link" danger>删除</a-button>
                            </a-popconfirm></AntdZh>
                        </span>
                    </div>
                </template>
            </template>
        </a-table>
        <AntdZh>
            <a-pagination v-model:current="query.pageNum" v-model:pageSize="query.pageSize" :total="total"
                @change="getCasingsList" />
        </AntdZh>

        <!-- 套管选择弹窗 -->
        <AntdConfirmModal title="套管选择" ref="modalRef" width="700px" :keepSlot="false" @confirm="add">
            <casing-popup-page></casing-popup-page>
            <a-form :model="items" name="basic" style="margin-top: 20px;" :label-col="{ span: 8 }">
                <a-row>
                    <a-col :pull="2" :span="12">
                        <a-form-item label="顶部" name="top">
                            <a-input-number v-model:value="items.top" style="width: 150px;" :min="0" placeholder="请输入顶部" />
                        </a-form-item>
                    </a-col>
                    <a-col :pull="2" :span="12">
                        <a-form-item label="底部" name="bottom">
                            <a-input-number v-model:value="items.bottom" style="width: 150px;" :min="0"
                                placeholder="请输入底部" />
                        </a-form-item>
                    </a-col>
                </a-row>
            </a-form>
        </AntdConfirmModal>
    </a-drawer>
</template>
<script setup>
import { cloneDeep } from 'lodash-es';
import { initCasing, updateCasing, deleteCasing, changeRed } from "@/api/casing"
import { casingList, createCasing, delCasing } from "@/api/structure/structure.js";
import CasingPopupPage from '../../../../../components/CasingPopupPage.vue';
import casingStore from '@/store/modules/casingDraw'
import useApp from "@/hooks";
import d3DrawStore from "@/store/modules/d3Draw";
const d3Draw = d3DrawStore();
const { $, proxy } = useApp();
const casingDraw = casingStore();
const open = ref(false)
const total = ref(1);
const modalRef = ref(null);
const query = ref({ pageNum: 1, pageSize: 10, sortBy: 'id', searchKey: '' });
const editableData = reactive({});
const dataSource = ref([]);
const casingLine = ref([]);
const items = ref({
    top: 0,
    bottom: 0
})
const data = reactive({
    form: {}
});
const { form } = toRefs(data);
const columns = [
    {
        title: '操作',
        dataIndex: 'operation',
        id: 'operation',
        width: 130,
    }, {
        title: '公称尺寸(in)',
        dataIndex: 'nominalSize',
        id: 'nominalSize',
        width: 150,
    }, {
        title: '套管外径(mm)',
        dataIndex: 'outerDiameter',
        id: 'outerDiameter',
        width: 150,
    }, {
        title: '套管内径(mm)',
        dataIndex: 'innerDiameter',
        id: 'innerDiameter',
        width: 150,
    }, {
        title: '套管通径(mm)',
        dataIndex: 'diameter',
        id: 'diameter',
        width: 150,
    }, {
        title: '套管厚度(mm)',
        dataIndex: 'thickness',
        id: 'thickness',
        width: 150,
    }, {
        title: '底部',
        dataIndex: 'bottom',
        id: 'bottom',
        width: 150,
    }, {
        title: '顶部',
        dataIndex: 'top',
        id: 'top',
        width: 150,
    }];

function openDrawer() {
    open.value = true;
}
defineExpose({
    openDrawer: openDrawer
})

//增
const add = () => {
    let CasingData = JSON.parse(localStorage.getItem('selectCasing'))
    let wellData = JSON.parse(localStorage.getItem('wellData'))
    items.value.wellId = wellData.wellId
    items.value.wellRecordId = wellData.id
    // items.value.casingId = CasingData[0].casingId
    items.value.casingRecordId = CasingData[0].id
    createCasing(items.value).then(res => {
        modalRef.value.closeModal();
        // casingDraw.addCasingData(CasingData[0].outerDiameter, CasingData[0].bottom, CasingData[0].top)
        getCasingsList()
        resetData()
    });
}

//删
const dele = id => {
    delCasing(id).then(res => {
        $.showToast({
            title: '删除成功',
            icon: 'success'
        })
        dataSource.value.forEach((item, index) => {
            if (item.id == id) {
                deleteCasing(casingLine.value[index]);
            }
        })
        getCasingsList()
        delete editableData[id];
    })

}

// 井结构管理的套管信息
function getCasingsList() {
    dataSource.value.forEach((item, index) => {
        deleteCasing(casingLine.value[index]);
    })
    casingLine.value = []
    let wellData = JSON.parse(localStorage.getItem('wellData'))
    casingList(wellData.wellId).then((response) => {
        response.forEach((res) => {
            console.log('res',res);
            casingLine.value.push(initCasing(d3Draw.$, d3Draw.d3Canvas, res.outerDiameter, res.top, res.bottom))
        });
        console.log('casingLine.value', casingLine.value);
        console.log("getCasingsList", response);
        dataSource.value = response;
        total.value = response.length;
    });
}
getCasingsList()

function openModal() {
    modalRef.value.openModal()
}
function resetData() {
    items.value.top = 0
    items.value.bottom = 0
}
</script>